<template>
	<view>
		<block v-if="paramData!=undefined">
			<view class="item-box" :style="{'padding-left':(35*parseInt(currentLayer))+'rpx'}"
				@tap="tapItemOne(paramData)">
				<view class="point" v-if="paramData.ifMinNode&&paramData.ifMinNode==='Y'">

				</view>
				<image v-if="paramData[children].length>0" :class="paramData.show? 'arrow-down-css':'arrow-right-css'"
					src="./image/arrow.png">
				</image>
				<view class="level1">
					{{paramData[title]}}
					<view class="color" v-if="paramData.progress && paramData.level==1">
						<u-tag :text="paramData.progress+'%'" v-if="paramData.progress === '100'"
							type="success"></u-tag>
						<u-tag :text="paramData.progress+'%'" v-else></u-tag>
					</view>
					<u-tag class="over" :text="'已完成'" type="success"
						v-if="paramData.ifMinNode==='Y' && paramData.ifComplete==='Y'"></u-tag>
				</view>
			</view>
			<view v-if="paramData[children]!=undefined&&paramData.created" v-show="paramData.show">
				<view v-for="item in paramData[children]" v-if="paramData[children].length>0">
					<neo-tree-list-item @parentEmit="parentEmit" :parentData="paramData" :layer="(currentLayer+1)"
						:style="{'padding-left':10}" :paramData="item" @tapTitle="tapItemOne">
					</neo-tree-list-item>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		name: "neo-tree-list-item",
		data() {
			return {
				currentLayer: 0, //当前层级
			};
		},
		props: {
			paramData: {
				type: Object,
				default: undefined
			},
			layer: {
				type: [Number, String],
				default: 1
			},
			parentData: {
				type: Object,
				default: undefined
			},
			title: {
				type: String,
				default: 'name'
			},
			children: {
				type: String,
				default: 'children'
			}

		},
		watch: {
			layer: {
				handler(newValue, oldValue) {
					if (oldValue == undefined)
						newValue = parseInt(newValue) - 1
					this.currentLayer = parseInt(newValue) + 1
				},
				immediate: true
			}
		},


		methods: {
			tapItemOne(item_one) {
				if (item_one.children == undefined || item_one.children.length == 0) {
					this.$emit('tapTitle', item_one)
					return
				}

				item_one.show = item_one.show == undefined ? true : !item_one.show
				if (item_one.show && (item_one.created == undefined)) {
					item_one.created = true
				}
				this.$forceUpdate()

			},

			parentEmit() {
				if (this.parentData != undefined) {
					let allChecked = true
					this.parentData.children.forEach(item => {
						if (!item.checked)
							allChecked = false

					})
					let parentName = this.parentData.name
					this.parentData.name = ''
					this.parentData.name = parentName
					this.parentData.checked = allChecked
					this.$emit('parentEmit')
				}
			},

			//选中处理
			setChecked(item_one) {
				let name = item_one.name
				item_one.name = ''
				item_one.name = name
				item_one.checked = item_one.checked == undefined ? true : !item_one.checked
				this.recursionChecked(item_one, item_one.checked)
				if (this.parentData != undefined) {
					let allChecked = true
					this.parentData.children.forEach(item => {
						if (!item.checked)
							allChecked = false

					})
					let parentName = this.parentData.name
					this.parentData.name = ''
					this.parentData.name = parentName
					this.parentData.checked = allChecked
					this.$emit('parentEmit')
				}



			},
			recursionChecked(item_one, checked) {
				if (item_one.children == undefined || item_one.children.length == 0)
					return
				item_one.children.forEach((item, index) => {
					let name = item.name
					item.name = ''
					item.name = name
					item.checked = checked
					this.recursionChecked(item, checked)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.level1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		font-size: 36rpx;
		line-height: 66rpx;

		.over {
			margin-left: 20rpx;
		}
	}

	.item-box {
		display: flex;
		align-items: center;
		min-height: 120rpx;
		// background-color: #ddf0f9;
		position: relative;

		.image-box {
			position: absolute;
			right: 15rpx;
			width: 45rpx;
			height: 45rpx;
		}

	}

	.point {
		width: 10rpx;
		height: 10rpx;
		background-color: #5ac725;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.arrow-down-css {
		width: 30rpx;
		height: 30rpx;
		margin-right: 1rpx;
		transform: rotate(90deg);
	}

	.arrow-right-css {
		width: 30rpx;
		height: 30rpx;
		margin-right: 1rpx // transform: rotate(-90deg);
	}
</style>